<template>
  <div class="menu-wrap" :class="menuExpand ? 'expand' : 'shrink'">
    <el-menu
      class="sidebar-el-menu"
      mode="vertical"
      router
      :default-active="toIndex"
    >
      <template v-for="(route, index) in menuList">
        <el-submenu
          :key="index"
          :index="route.meta.menuIndex"
          v-if="menuExpand && route.children && route.children.length"
        >
          <template slot="title">
            <svg-icon
              class="menu-icon font-14"
              :icon-class="route.meta.icon"
            ></svg-icon>
            <span slot="title">{{ route.meta.title }}</span>
          </template>
          <el-menu-item-group v-for="(subroute, i) in route.children" :key="i">
            <el-menu-item :key="i" :index="subroute.meta.menuIndex">
              {{ subroute.meta.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <template v-else>
          <el-menu-item :key="index" :index="route.meta.menuIndex">
            <!-- <i :class="item.icon"></i> -->
            <svg-icon
              class="menu-icon font-14"
              :icon-class="route.meta.icon"
            ></svg-icon>
            <span v-if="menuExpand" slot="title">{{ route.meta.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
    <div class="controlArea" @click="handleExpand">
      <svg-icon
        class="menu-icon font-14"
        :icon-class="'project_menu_control'"
      ></svg-icon>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      menuExpand: true,
      active: '/test'
    }
  },
  computed: {
    toIndex() {
      // 最后一级高亮
      const arr = this.$route.path.split('/')
      return arr[arr.length - 1]
    }
  },
  methods: {
    handleExpand() {
      this.menuExpand = !this.menuExpand
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-wrap {
  background-color: $--color-nav;
  display: flex;
  flex-direction: column;
  height: 100%;
  float: left;
  margin-right: 5px;
  &.expand {
    width: 200px;
    .controlArea {
      .menu-icon {
        transform: rotate(180deg);
      }
    }
  }
  &.shrink {
    width: 50px;
    ::v-deep .el-menu-item {
      padding: 0 0 0 18px !important;
    }
  }
  .controlArea {
    height: 48px;
    background: #061d37;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $--mian-color;
    cursor: pointer;
  }
}
.el-menu {
  flex: 1;
  background-color: $--color-nav;
  border-color: $--color-nav;
  .menu-icon {
    margin-right: 10px;
  }
  .el-menu-item {
    color: $--mian-color;

    &.is-active {
      background-color: $--menu-active-bg-color;
      color: $--menu-active-color;
    }

    &:hover,
    &:focus {
      background-color: $--menu-active-bg-color;
    }
  }

  ::v-deep .el-submenu__title {
    color: $--mian-color;

    &:hover,
    &:focus {
      background-color: $--menu-active-bg-color;
    }
  }

  .el-submenu {
    ::v-deep .el-menu {
      background-color: $--submenu-bg-color;
    }
  }

  // .el-menu-item {
  //   color: $--mian-color;

  //   &:hover,
  //   &:focus {
  //     background-color: #263145;
  //   }
  // }

  // .el-submenu {
  //   ::v-deep .el-menu {
  //     background-color: $--color-nav;
  //   }

  //   ::v-deep .el-submenu__title {
  //     color: $--mian-color;

  //     &:hover {
  //       background-color: #263145;
  //     }
  //   }
  // }
}
</style>
